<template>
  <ul
    class="
      mt-4
      grid
      lg:grid-cols-4
      grid-cols-2
      lg:gap-5
      gap-[10px]
      lg:px-0
      px-[10px]
    "
  >
    <li
      class="rounded overflow-hidden shadow"
      v-for="item in list"
      :key="item.title"
    >
      <div class="relative lg:w-[285px] w-full lg:h-[160px]">
        <el-image class="w-full object-cover" :src="item.img"></el-image>
        <span
          class="
            absolute
            bg-black/20
            rounded
            px-2
            left-4
            bottom-3
            text-white
            font-semibold
            lg:text-xl
            text-base
          "
          >{{ item.title }}</span
        >
      </div>
      <div class="bg-white lg:pt-2 pb-3 px-4 pt-1">
        <div class="text-gray-99 space-x-4">
          <span v-for="(word, index) in item.keys" :key="index">{{
            word
          }}</span>
        </div>
        <el-tooltip
          :disabled="!item.tip"
          :content="item.content"
          placement="top"
          popper-class="w-64 bg-gray-33 text-white text-xs"
        >
          <div
            class="mt-1 leading-6 line-clamp-2 text-gray-66"
            @mouseenter="onHoverContent($event, item)"
          >
            {{ item.content }}
          </div>
        </el-tooltip>
      </div>
    </li>
  </ul>
</template>

<script>
import listData from "./data";
listData = listData.map((item) => {
  item.img = require("@/assets/img/shop/" + item.img);
  return item;
});

export default {
  data() {
    return {
      all: listData,
      list: listData,
    };
  },
  created() {
    this.load("全部");
  },
  methods: {
    load(title) {
      this.list =
        title === "全部"
          ? this.all
          : this.all.filter((item) => item.keys.includes(title));
    },
    showTip(text) {
      console.log(text.length);
      return true;
    },
    onHoverContent(event, item) {
      let el = event.target;
      if (el && item) {
        item.tip = el.scrollHeight > el.clientHeight;
      }
    },
  },
};
</script>

<style>
</style>